import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {DragulaService} from "ng2-dragula";
import {Util} from "../../../common/util";
import * as _ from 'lodash';

@Component({
  selector: 'interbank-table-config',
  templateUrl: './table-config.component.html',
  styleUrls: ['./table-config.component.scss']
})
export class TableConfigComponent implements OnInit {

  public defaultConfig: Array<any> = [
    {
      field: "",
      text: "资产组合",
      show: true,
      index: 0
    }, {
      field: "",
      text: "场所",
      show: true,
      index: 1
    }, {
      field: "",
      text: "业务类型",
      show: true,
      index: 2
    }, {
      field: "",
      text: "交易对手",
      show: true,
      index: 3
    }, {
      field: "",
      text: "证券代码",
      show: true,
      index: 4
    }, {
      field: "",
      text: "证券简称",
      show: true,
      index: 5
    }, {
      field: "",
      text: "交易日期",
      show: true,
      index: 6
    }, {
      field: "",
      text: "结算日期",
      show: true,
      index: 7
    }, {
      field: "",
      text: "清算金额",
      show: true,
      index: 8
    }, {
      field: "",
      text: "指令状态",
      show: true,
      index: 9
    }, {
      field: "",
      text: "合同状态",
      show: true,
      index: 10
    }, {
      field: "",
      text: "成交编号",
      show: true,
      index: 11
    }];

  public userConfig: Array<any> = [];

  public modalStatus: boolean;

  @ViewChild("modal")
  public modal: ElementRef;

  constructor(public dragulaService: DragulaService) {
    const $ = window["$"];
    dragulaService.drop.subscribe((value) => {
      let newConfig: Array<any> = [];
      const order: Array<number> = Array.prototype.slice.call($(value["2"]).find('li[data-source-index]').map((index, item) => {
        return parseInt($(item).attr("data-source-index"), 10);
      }));
      order.forEach((o) => {
        const result = this.userConfig.filter((uc) => {
          if (uc.index === o) {
            return true;
          }
        });
        if (result && result.length > 0) {
          newConfig = newConfig.concat(result);
        }
      });
      this.userConfig = newConfig;
    });
  }

  ngOnInit(): void {
    try {
      const config = JSON.parse(localStorage.getItem("ibtTableLayoutConfig"));
      if (config) {
        this.userConfig = config;
      } else {
        this.userConfig = _.cloneDeep(this.defaultConfig);
        this.saveUserConfig();
      }
    } catch (e) {
      this.userConfig = _.cloneDeep(this.defaultConfig);
      this.saveUserConfig();
    }
  }

  public openModal(): void {
    this.modalStatus = true;
    Util.$(this.modal.nativeElement).modal("show");
  }

  public closeModal(): void {
    this.modalStatus = false;
    Util.$(this.modal.nativeElement).modal("hide");
  }

  public closeModalAndRollBackConfig(): void {
    this.userConfig = this.getConfigFromlocalStorage();
    this.closeModal();
  }

  public toggleModal(): void {
    this.modalStatus = !this.modalStatus;
    Util.$(this.modal.nativeElement).modal('toggle');
  }

  public saveUserConfig() {
    this.setConfigTolocalStorage(this.userConfig);
    this.closeModal();
    window['swal']("提示", "表格布局配置保存成功！", "success")
  }

  public resetUserConfig() {
    this.setConfigTolocalStorage(this.defaultConfig);
    this.userConfig = _.cloneDeep(this.defaultConfig);
  }

  public getConfigFromlocalStorage(): Array<any> {
    return JSON.parse(localStorage.getItem('ibtTableLayoutConfig'));
  }

  public setConfigTolocalStorage(config: Array<any> = []) {
    localStorage.setItem('ibtTableLayoutConfig', JSON.stringify(config));
  }
}
